<!--
 * @Descripttion:
 * @Author: yansu
 * @Date: 2020-09-22 16:46:42
 * @LastEditors: yansu
 * @LastEditTime: 2020-11-20 17:11:51
-->
<template>
  <el-card class="card" >
    <div slot="header">
      <span class="title">智能话术推荐</span>
    </div>
    <div class="wrap" ref='wrapper'>
      <div class="recommend" v-for="(item,index) in recommendList" :key="index" ref="recommend" v-if="recommendList.length">
        <div class="question"><p v-html="item.question"></p></div>
        <div class="answer"><p v-html="item.answer"></p></div>
      </div>
      <div v-if="recommendList.length == 0" class="empty">
        <div class="imgWrap">
          <el-image :src="require('@/assets/img/intelligent/noMatch.png')" fit="fit">
          </el-image>
          <span>暂无话术推荐</span>
        </div>
      </div>
    </div>
  </el-card>
  <!--<el-card class="card recommend-right fr" >-->
    <!--<div slot="header">-->
      <!--<span class="title">实时监测</span>-->
    <!--</div>-->
    <!--<div class="wrap">-->
      <!--<div>语速： <span>{{ getGoldenMonitor.speed ? getGoldenMonitor.speed + '字/分钟' : '&#45;&#45;' }}<span v-show="getGoldenMonitor.speed">({{getGoldenMonitor.speed < 180 ? '缓慢' : getGoldenMonitor.speed >= 180 && getGoldenMonitor.speed <= 200 ? '正常':'过快'}})</span></span></div>-->
      <!--<div>座席抢话： <span>{{getGoldenMonitor.begin_time && getGoldenMonitor.end_time && getGoldenMonitor.begin_time > getGoldenMonitor.end_time ? '是' : '否'}}</span></div>-->
      <!--<div>最近抢话时间： <span>{{getGoldenMonitor.prePreemptionTime || '&#45;&#45;'}}</span></div>-->
      <!--<div>最近抢话语速：<span>{{ getGoldenMonitor.preSpeed ? getGoldenMonitor.preSpeed + '字/分钟' : '&#45;&#45;' }}</span></div>-->
    <!--</div>-->
  <!--</el-card>-->
</template>
<script>
export default {
  data () {
    return {
      recommendList: []
    }
  },
  methods: {
    back () {
      this.$emit('back')
    }
  },
  // computed: {
  //   getGoldenMonitor: {
  //     get: function () {
  //       const obj = this.$store.state.call.goldenMonitor
  //       return obj[this.$route.params.id] || {}
  //     },
  //     set: function () {}
  //   }
  // },
  watch: {
    '$store.state.call.recommendList': function (val) {
      this.recommendList = []
      this.recommendList = val
      this.$nextTick(() => {
        if (this.$refs.wrapper.scrollHeight) {
          this.$refs.wrapper.scrollTop = this.$refs.wrapper.scrollHeight
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.card {
  margin: 0 20px;
  /deep/.el-card__body {
  }
  .wrap {
    max-height calc(25vh - 70px);
    height calc(25vh - 70px);
    overflow-y: scroll;
    .content {
      display: flex;
      flex-wrap: wrap;
      height: 150px;
      .process {
        height: 36px;
        line-height: 36px;
        border: 1px solid #E9EBED;
        font-size: 14px;
        padding: 0 26px;
        font-weight: 600;
        position: relative;
        margin-top: 20px;
        .logo {
          width: 15px;
          height: 15px;
          background: #459BEA;
          color: white;
          text-align: center;
          line-height: 15px;
          border-radius: 50%;
          position: absolute;
          bottom: 3px;
          right: 3px;
        }
      }
    }

    .recommend {
      border-bottom: 1px dashed #E9EBED;
      padding: 0 15px;
      margin 10px 0;
      border-radius: 5px;
      .question,.answer{
        display flex;
        align-items center;
        margin 3px 0
        p{
          line-height 18px;
          width 95%
        }
      }
      .question::before{
        content:"Q";
        width 20px;
        height 20px;
        background #4D9BDA;
        color white;
        text-align center;
        line-height 20px;
        margin-right 10px;
        border-radius 4px
      }
      .answer::before{
        content:"A";
        width 20px;
        height 20px;
        background #F8696A;
        color white;
        text-align center;
        line-height 20px;
        margin-right 10px
        border-radius 4px

      }
      p {
        line-height: 36px;
        font-size: 14px;
      }
    }
  }
  .empty{
    display flex
    justify-content center
    align-items center
    height 100%
    width 100%
    .imgWrap{
      display flex
      align-items center
      span{
        margin 10px 0 0 10PX;
        color #B3B3B3;
      }
    }
  }
}
/*.recommend-left{*/
  /*flex:1;*/
/*}*/
/*.recommend-right{*/
  /*width: 280px;*/
  /*margin-left:20px;*/
  /*>>> .el-card__body{*/
    /*padding-right:10px;*/
  /*}*/
/*}*/
/*.recommend-wrap{*/
  /*margin:0 20px;*/
  /*display:flex;*/
/*}*/
</style>
